<template>
	<view class="app">
		<view class="top">
			<image class="u-bg" src="/static/user.jpg"></image>
			<view class="user-wrapper">
				<image class="avatar" src="/static/head4.jpg"></image>
				<view class="cen column">
					<text class="username f-m">开始都但是没</text>
					<text class="user-group">普通会员</text>
				</view>
				<!--
				<view class="login-box">
					<text>请登录</text>
				</view>
				-->
			</view>
			<image class="arc-line" src="/static/icon/arc.png" mode="aspectFill"></image>
		</view>
		<view class="money-wrap" style="margin-top: 30rpx;">
			<view class="item center">
				<text class="num">0</text>
				<text>余额</text>
			</view>
			<view class="item center">
				<text class="num">0</text>
				<text>优惠券</text>
			</view>
			<view class="item center">
				<text class="num">0</text>
				<text>积分</text>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order-wrap">
			<view class="o-header row">
				<text class="tit">我的订单</text>
				<text class="more">查看全部</text>
				<text class="mix-icon icon-you"></text>
			</view>
			<view class="o-list">
				<view class="item center" @click="gotolist()">
					<text class="mix-icon icon-daifukuan"></text>
					<text>待付款</text>
					<text class="number">2</text>
				</view>
				<view class="item center">
					<text class="mix-icon icon-daifahuo"></text>
					<text>待发货</text>
					<!-- <text class="number">12</text> -->
				</view>
				<view class="item center">
					<text class="mix-icon icon-yishouhuo"></text>
					<text>待收货</text>
					<!-- <text class="number">2</text> -->
				</view>
				<view class="item center">
					<text class="mix-icon icon-daipingjia"></text>
					<text>待评价</text>
					<!-- <text class="number">7</text> -->
				</view>
			</view>
		</view>
		<view class="option-wrap">
			<view class="sec-header row">
				<text class="mix-icon icon-lishijilu"></text>
				<text class="fill">浏览历史</text>
				<text class="mix-icon icon-lajitong"></text>
			</view>
			<scroll-view scroll-x class="h-scroll">
				<view class="pro-list row">
					<image v-for="(item, index) in proList" :key="index" :src="item['imglist'][0]" mode="aspectFill">
					</image>
				</view>
			</scroll-view>

			<view class="content">
				<view class="mix-list-cell b-b">
					<text class="cell-icon mix-icon icon-iconfontweixin" style="color:#0081FF;"></text>
					<text class="cell-tit clamp">我的栏目1</text>
					<text class="cell-tip"></text>
					<text class="cell-more mix-icon icon-you"></text>
				</view>
			</view>

			<view class="content">
				<view class="mix-list-cell b-b">
					<text class="cell-icon mix-icon icon-tixian1" style="color:#07C160;"></text>
					<text class="cell-tit clamp">我的栏目2</text>
					<text class="cell-tip"></text>
					<text class="cell-more mix-icon icon-you"></text>
				</view>
			</view>

			<view class="content">
				<view class="mix-list-cell b-b">
					<text class="cell-icon mix-icon icon-wodezhanghu_zijinjilu" style="color:#6739B6;"></text>
					<text class="cell-tit clamp">我的栏目3</text>
					<text class="cell-tip"></text>
					<text class="cell-more mix-icon icon-you"></text>
				</view>
			</view>

			<view class="content">
				<view class="mix-list-cell b-b">
					<text class="cell-icon mix-icon icon-share" style="color: #5fcda2"></text>
					<text class="cell-tit clamp">分享</text>
					<text class="cell-tip">呼朋唤友赢好礼</text>
					<text class="cell-more mix-icon icon-you"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				proList: [],
			}
		},
		onLoad() {
			let that = this;
			that.proList = that.globals.proList;
			console.log('产品数据', that.proList);
		},
		methods: {
			// ----- 跳转订单 ----
			gotolist() {
				let url = '/pages/order/listorder';
				console.log(url)
				this.navTo(url);
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang='scss'>
	.app {
		padding-bottom: 20rpx;
	}

	.top {
		position: relative;
		overflow: hidden;
		padding-top: calc(var(--status-bar-height) + 52rpx);
		padding-bottom: 6rpx;

		.u-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 330rpx;
		}

		.user-wrapper {
			display: flex;
			flex-direction: column;
			flex-direction: row;
			align-items: center;
			position: relative;
			z-index: 5;
			padding: 20rpx 30rpx 60rpx;
		}

		.login-box {
			font-size: 36rpx;
			color: #fff;
		}

		.avatar {
			flex-shrink: 0;
			width: 130rpx;
			height: 130rpx;
			border-radius: 100px;
			margin-right: 24rpx;
			border: 4rpx solid #fff;
			background-color: #fff;
		}

		.username {
			font-size: 34rpx;
			color: #fff;
		}

		.user-group {
			align-self: flex-start;
			padding: 10rpx 16rpx;
			margin-top: 16rpx;
			font-size: 20rpx;
			color: #fff;
			background-color: rgba(255, 255, 255, .3);
			border-radius: 100rpx;
		}

		.arc-line {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9;
			width: 100%;
			height: 32rpx;
		}
	}

	.money-wrap {
		display: flex;
		justify-content: space-around;
		width: 700rpx;
		margin: 6rpx auto 0;
		padding: 14rpx 0;
		background: #fff;
		border-radius: 10rpx;

		.item {
			flex-direction: column;
			width: 130rpx;
			height: 120rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #606266;
		}

		.num {
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 700;
		}
	}

	.order-wrap {
		width: 700rpx;
		margin: 20rpx auto 0;
		background: #fff;
		border-radius: 10rpx;

		.o-header {
			padding: 28rpx 20rpx 6rpx 26rpx;

			.tit {
				flex: 1;
				font-size: 32rpx;
				color: #333;
				font-weight: 700;
			}

			.more {
				font-size: 24rpx;
				color: #999;
			}

			.icon-you {
				margin-left: 4rpx;
				font-size: 20rpx;
				color: #999;
			}
		}

		.o-list {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0;
		}

		.item {
			flex-direction: column;
			width: 130rpx;
			height: 130rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #606266;
			position: relative;

			.mix-icon {
				font-size: 50rpx;
				margin-bottom: 20rpx;
				color: #fa436a;
			}

			.icon-shouhoutuikuan {
				font-size: 44rpx;
			}
		}

		.number {
			position: absolute;
			right: 22rpx;
			top: 6rpx;
			min-width: 34rpx;
			height: 34rpx;
			line-height: 30rpx;
			text-align: center;
			padding: 0 8rpx;
			font-size: 18rpx;
			color: #fff;
			border: 2rpx solid #fff;
			background-color: $base-color;
			border-radius: 100rpx;
		}
	}

	.option-wrap {
		width: 700rpx;
		margin: 20rpx auto 0;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 10rpx;

		.sec-header {
			padding: 26rpx 14rpx 0 24rpx;
			font-size: 28rpx;
			color: #333;

			.icon-lishijilu {
				font-size: 46rpx;
				color: #50bf8b;
				margin-right: 16rpx;
				line-height: 40rpx;
			}

			.icon-lajitong {
				padding: 4rpx 10rpx;
				font-size: 36rpx;
				color: #999;
			}
		}

		.pro-list {
			flex-wrap: nowrap;
			padding: 20rpx 0 12rpx;

			&:before,
			&:after {
				content: '';
				min-width: 30rpx;
				height: 30rpx;
			}

			&:after {
				min-width: 20rpx;
			}

			image {
				flex-shrink: 0;
				width: 144rpx;
				height: 144rpx;
				margin-right: 16rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>


/* 列表 */
<style scoped lang='scss'>
	.mix-list-cell {
		display: flex;
		align-items: center;
		height: 96rpx;
		padding: 0 24rpx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b {
			&:after {
				left: 30rpx;
				border-color: #f0f0f0;
			}
		}

		.cell-icon {
			align-self: center;
			width: 60rpx;
			font-size: 38rpx;
		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: #999;
			margin-left: 16rpx;
		}

		.cell-tit {
			flex: 1;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 26rpx;
		}
	}
</style>
